import { addComment, hasCommented } from "@/api/comment";
import { employeeDetail } from "@/api/user";
import { Image, View, Text } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { AtButton, AtIcon, AtRate, AtTag, AtTextarea, AtToast } from "taro-ui";

const EmployeeInfo: React.FC = () => {
  const router = useRouter();

  const { employeeId, orderId, orderType, status } = router.params;

  const [employeeInfo, setEmployeeInfo] = useState<EmployeeInfoDetail>();
  const [score, setScore] = useState<number>(0);
  const [commentVal, setCommentVal] = useState<string>("");
  const [isOk, setIsOk] = useState<boolean>(false);
  const [showTextarea, setShowTextarea] = useState<boolean>(true);

  const pageFromOrder = Taro.getCurrentPages()[Taro.getCurrentPages().length - 2].route === "pages/order/index";

  const fetchUserDetail = async () => {
    const { data } = await employeeDetail(Number(employeeId));
    setEmployeeInfo(data);
  }

  useEffect(() => {
    fetchUserDetail();
  }, [employeeId])

  const handleChangeComment = (value: string) => {
    setCommentVal(value);
  }

  const handleChangeScore = (value: any) => setScore(value);

  const handleComment = async () => {
    const data = await addComment(score, commentVal, Number(employeeId), Number(orderId), orderType === "true");
    if (data.code === 200) {
      setIsOk(true);
      setScore(0);
      setCommentVal("");
      fetchUserDetail();
    }
  }

  useEffect(() => {
    const fetchHasCommented = async () => {
      const { data } = await hasCommented(Number(orderId), orderType === "true");
      setShowTextarea(!data);
    }
    if (pageFromOrder) {
      fetchHasCommented();
    }
  }, [isOk, orderId, pageFromOrder])

  return (
    <View className='h-screen bg-gray-100 flex flex-col gap-y-3 p-3'>
      <View className='flex justify-between px-5 py-3 bg-white rounded-md'>
        {
          employeeInfo && (
            <>
              <Image src={employeeInfo.avatar} className='rounded-md flex-shrink-0' style={{ width: "200rpx", height: "200rpx" }} />
              <View className='ml-3 float-left w-full'>
                <View className='text-sm font-bold flex justify-between'>
                  <Text className='text-[#6190E8]'>服务</Text>
                  <Text>{employeeInfo.serviceName}</Text>
                </View>
                <View className='text-sm font-bold flex justify-between'>
                  <Text className='text-[#6190E8]'>员工</Text>
                  <Text>{employeeInfo.employeeName}</Text>
                </View>
                <View className='text-sm font-bold flex justify-between'>
                  <Text className='text-[#6190E8]'>价格</Text>
                  <Text>{employeeInfo.price}</Text>
                </View>
                <AtTag circle size='small' className='font-bold text-white bg-[#6190E8]'>{employeeInfo.gender ? "女" : "男"}</AtTag>
              </View>
            </>
          )
        }
      </View>

      {
        (pageFromOrder && showTextarea && status === "completed") && (
          <View className='flex flex-col items-center gap-y-3'>
            <View className='flex items-center gap-x-2'>
              <Text className='text-[#6190E8] font-bold text-sm'>本次服务评分</Text>
              <AtRate value={score} onChange={handleChangeScore} />
              <Text className='text-[#FFB110] font-semibold'>{score} 分</Text>
            </View>
            <AtTextarea className='w-11/12' value={commentVal} maxLength={200} onChange={handleChangeComment} placeholder='请输入评论...' />
            <View className='w-full px-5'>
              <AtButton size='small' type='primary' className='float-right' onClick={handleComment}>
                评论
              </AtButton>
            </View>
          </View>
        )
      }

      <View className='px-5 flex flex-col gap-y-5'>
        <View className='text-xl font-bold text-[#6190E8] flex items-center gap-x-2'>
          <Text>用户评论</Text>
          <AtIcon value='message' size={20} />
        </View>
        {
          employeeInfo?.comment
            ?
            employeeInfo?.comment.map(comment => (
              <>
                <View className='bg-white rounded-md flex' key={comment?.commentId}>
                  <View>
                    <Image src={comment?.avatar} className='rounded-full' style={{ width: "100rpx", height: "100rpx", transform: "translateX(-20rpx) translateY(-20rpx)" }} />
                  </View>
                  <View className='w-full'>
                    <View className='w-full flex justify-between px-2'>
                      <AtRate size={15} className='mb-1' value={comment.score} />
                      <View className='text-gray-400 text-xs'>{comment.commentTime}</View>
                    </View>
                    <View className='text-wrap'>{comment?.comment}</View>
                  </View>
                </View>
              </>
            ))
            :
            <View className='flex gap-x-3 items-center justify-center mt-10'>
              <AtIcon value='edit' />
              <Text className='text-xl text-gray-400'>暂无评论</Text>
            </View>
        }
      </View>

      <AtToast isOpened={isOk} text='成功' status='success' />
    </View >
  )
}

export default EmployeeInfo;
